<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
    <style>
      table td {
        border: 1px solid #000;
        padding: 3px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <table>
        <thead>
          <tr>
            <td>序号</td>
            <td>选中</td>
            <td>名称</td>
            <td>描述</td>
            <td>单价</td>
            <td>数量</td>
            <td>小计</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(l,i) in goods" :key="i">
            <td>{{i+1}}</td>
            <td><input type="checkbox" v-model="l.check" /></td>
            <td>{{l.title}}</td>
            <td><img :src="imgSrc" width="100" height="50" alt="" /></td>
            <td><input type="text" min="1" v-model.number="l.price" /></td>
            <td><input type="number" min="1" v-model.number="l.count" /></td>
            <td>{{l.price * l.count}}</td>
            <td><button @click="goods.splice(i,1)">删除</button></td>
          </tr>
        </tbody>
      </table>
      <div>
        <p>
          <label for="check">全选反选</label>
          <input type="checkbox" id="check" v-model="quan" />
        </p>
        <p>
          <button @click="Deletecheck">删除选中</button>
        </p>
        <p>总数量:{{newCount}}</p>
        <p>选中数量 :{{checkCount}}</p>
        <p>总价值: {{amount}}</p>
        <p>选中价值: {{chechAmount}}</p>
        <button>结算</button>
      </div>
    </div>

    <script>
      const vm = new Vue({
        data: {
          title: "v-model 实现简易的购物车  ",
          goods: [
            { check: false, title: "上衣", price: 200, count: 10 },
            { check: true, title: "裤子", price: 100, count: 10 },
            { check: false, title: "鞋子", price: 500, count: 10 },
            { check: false, title: "风衣", price: 1000, count: 10 },
            { check: true, title: "帽子", price: 300, count: 10 },
            { check: true, title: "西服", price: 2000, count: 10 },
          ],
          imgSrc: "http://47.104.209.44/base/imgs/1.jpg",
          total: 0,
          checkTotal: 0,
          amount: 0,
          chechAmount: 0,
        },
        computed: {
          quan: {
            get() {
              // return this.goods.filter(item=>item.check).length==this.goods.length ;
              // var flag = true;
              // this.goods.forEach(item=>{
              //     if(!item.check){
              //         flag = false;
              //     }
              // })
              // return flag
              // some every
              return this.goods.every((item) => item.check);
            },
            set(v) {
              console.log(v);
              // this.goods = this.goods.map(item=>item.check=v);
              this.goods = this.goods.map((item) => {
                item.check = v;
                return item;
              });
              //   this.goods.forEach((item, index) => {
              //     this.$set(this.goods, index, { ...item, check: v });
              //   });
            },
          },
          newCount() {
            var count = 0;
            this.goods.forEach((item) => {
              count += item.count;
            });
            return count;
          },
          checkCount() {
            var count = 0;
            this.goods.forEach((item) => {
              count += item.check ? item.count : 0;
            });
            return count;
          },
        },
        methods: {
          Deletecheck() {
            this.goods = this.goods.filter((item) => !item.check);
            // check true 删除
            // check false 保留
          },
        },
        watch: {
          // 深度监听
          goods: {
            deep: true,
            handler(v) {
              console.log(v);
              this.total = 0;
              this.amount = 0;
              this.checkTotal = 0;
              this.chechAmount = 0;
              v.forEach((item) => {
                this.total += item.count;
                this.amount += item.price * item.count;
                this.checkTotal += item.check ? item.count : 0;
                this.chechAmount += item.check ? item.count * item.price : 0;
              });
            },
          },
        },
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
          this.goods.forEach((item) => {
            this.total += item.count;
            this.amount += item.price * item.count;
            this.checkTotal += item.check ? item.count : 0;
            this.chechAmount += item.check ? item.count * item.price : 0;
          });
        },
      }).$mount("#app");
    </script>
  </body>
</html>
